<template>
	<div class="chart-pane-media">
		<!-- 媒体展示 -->
		<div id="Medialine"></div>
	</div>
</template>
<script>
var echarts = require('echarts');
export default{
	name:'Medialine',
	data(){
		return {
			msg:''
		}
	},
	computed: {
        name(){
            return this.$route.path
        }
    },
    mounted(){
    	var that = this;
    	that.getMedialine();
    },
	methods:{
		getMedialine(){
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('Medialine'));
			// 绘制图表
			myChart.setOption({
			    tooltip: {
			        trigger: 'axis'
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,//从最左侧开始
			        data: ['科技日报', '中国科技网', '中国科普网', '高新导报', '微博', '微信'],
			        //网格样式
			        splitLine: {
			            show: true,
			            lineStyle:{
							color: ['#0f4564'],
							width: 1,
							type: 'dashed'
			            }
			        },
			        //  改变x轴颜色
		            axisLine:{
		                lineStyle:{
		                    color:'#0e7992',
		                }
		            },
			    },
			    yAxis: {
			        type: 'value',
			        //网格样式
			        splitLine: {
			            show: true,
			            lineStyle:{
							color: ['#0f4564'],
							width: 1,
							type: 'dashed'
			            }
			        },
			        //  改变y轴颜色
		            axisLine:{
		                lineStyle:{
		                    color:'#0e7992',
		                }
		            },
			    },
			    series: [{
			        data: [85, 90, 130, 60, 55, 45],
			        type: 'line',
			        areaStyle: {
			        	color:'#2f3589',
			        	opacity:.35
			        },//背景
			        smooth: true
			    }],
			    color:['#3883de'],//折线颜色
			    textStyle:{
			    	color:'#ffffff'
			    }

			});
		}
	}
}
</script>
<style>
#Medialine{
	width:100%;
	height: 350px;
}
</style>